<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>上汽通用信息可视化</title>
    <link rel="stylesheet" type="text/css" href="../css/chart.css">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap/dist/css/bootstrap.min.css">
</head>

<body>
    <div class="nav">
        <div id="left-sec">
            <img src="../images/logo/sgm.png" alt="" style="margin-left:10px">
        </div>
        <div id="right-sec">
            <span>上汽通用信息可视化图表展示</span>
            <!-- Split button -->
            <div class="btn-group">
                <button type="button" class="btn btn-info" id="currentUser"></button>
                <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li id="logout"><a>退出</a></li>
                    <li id="reimport"><a>重新导入</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="side-bar">
        <ul>
            <li data-link="Sex" id="side-sex"><img src="../images/sidebar/sex.png" alt="" class="gray"><img src="../images/sidebar/sex-w.png" alt="" class="white">车主性别比例</li>
            <li data-link="Familycondition"><img src="../images/sidebar/baby.png" alt="" class="gray"><img src="../images/sidebar/baby-w.png" alt="" class="white">车主家庭状态</li>
            <li data-link="Homeposition"><img src="../images/sidebar/loc.png" alt="" class="gray"><img src="../images/sidebar/loc-w.png" alt="" class="white">车主常住地区域</li>
            <li data-link="Workposition"><img src="../images/sidebar/loc2.png" alt="" class="gray"><img src="../images/sidebar/loc2-w.png" alt="" class="white">车主工作地区域</li>
            <li data-link="Verticalmedia"><img src="../images/sidebar/four.png" alt="" class="gray"><img src="../images/sidebar/four-w.png" alt="" class="white">四大垂直网站</li>
            <li data-link="Webtop"><img src="../images/sidebar/favourite.png" alt="" class="gray"><img src="../images/sidebar/favourite-w.png" alt="" class="white">十大最受欢迎汽车网站</li>
            <li data-link="Apptop"><img src="../images/sidebar/app.png" alt="" class="gray"><img src="../images/sidebar/app-w.png" alt="" class="white">十大最受欢迎汽车APP</li>
            <li data-link="Cartop"><img src="../images/sidebar/car.png" alt="" class="gray"><img src="../images/sidebar/car-w.png" alt="" class="white">SGM十大最受欢迎车系</li>
            <li data-link="Comparisons"><img src="../images/sidebar/Browse.png" alt="" class="gray"><img src="../images/sidebar/Browse-w.png" alt="" class="white">车型对比</li>
            <li data-link="Hobbies"><img src="../images/sidebar/hobby.png" alt="" class="gray"><img src="../images/sidebar/hobby-w.png" alt="" class="white">车主兴趣爱好</li>
        </ul>
    </div>
    <div class="main">
        <div class="top">
            <div class="select-wrap">
                <span class="select-tip">
                    选择城市：
                </span>
                <select class="province" id="s-province"></select>
            </div>
            <div class="select-wrap wrap-y">
                <span class="select-tip">
                    选择年份：
                </span>
                <select class="year">
                    <option value="2016">2016</option>
                </select>
            </div>
            <div class="select-wrap wrap-m">
                <span class="select-tip">
                    选择月份：
                </span>
                <select class="month">
                </select>
            </div>
            <div class="select-wrap">
                <button class="btn btn-default primary" id="update-chart">刷新</button>
            </div>
        </div>
        <div class="chart-container">
            <div class="s-chart-c" style="display:block;background-color:#2C293C">
                <div id="Sex" style="width:100%;height:400px" class="chart"></div>
                <div class="addon-sex">车主性别比例</div>
                <div class="info-sex">
                    <div class="male">
                        <img src="../images/male.png" alt="">
                        <div style="display:inline-block;vertical-align:middle">
                            <span style="color:#5CB6F9">男性比例</span>
                            <p><span id="male-num"></span></p>
                        </div>
                    </div>
                    <div class="female">
                        <img src="../images/female.png" alt="">
                        <div style="display:inline-block;vertical-align:middle">
                            <span style="color:#FFAE3B">女性比例</span>
                            <p><span id="female-num"></span></p>
                        </div>
                    </div>
                    <div class="unknown">
                        <img src="../images/unknow.png" alt="">
                        <div style="display:inline-block;vertical-align:middle">
                            未知
                            <p><span id="unknow-num"></span></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="s-chart-c" style="background-color:#2C293C">
                <div id="Familycondition" style="width:100%;height:400px" class="chart"></div>
                <div class="addon-family">车主家庭状态</div>
                <div class="info-family">
                    <div>
                        <span class="rect-have"></span>
                        <span class="word-have">育有子女</span>
                        <span id="have-num" style="padding-left:50px"></span>
                    </div>
                    <div>
                        <span class="rect-no"></span>
                        <span class="word-no">未&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;知</span>
                        <span id="no-num" style=padding-left:50px></span>
                    </div>
                </div>
            </div>
            <div class="s-chart-c" style="background-color:#2c293c">
                <div id="vertiacal-media-info">
                    <table>
                        <tr>
                            <td>
                                <!--data.autohome, data.yiche, data.pcauto, data.xcar-->
                                <span id="autohome"></span>
                                <br>
                                <span>汽车之家</span>
                            </td>
                            <td>
                                <span id="yiche"></span>
                                <br>
                                <span>易车网</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span id="pcauto"></span>
                                <br>
                                <span>太平洋汽车网</span>
                            </td>
                            <td>
                                <span id="xcar"></span>
                                <br>
                                <span>爱卡汽车</span>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="addon-vertical">四大垂直媒体访问量</div>
                <div id="Verticalmedia" style="width:50%;height:400px;display:inline-block;vertical-align:top" class="chart"></div>
            </div>
            <div class="s-chart-c">
                <div style="background-color:#2c293c;color:white;padding:5px 10px;font-weight:bold">
                    车主常住地
                </div>
                <div id="Homeposition" style="width:100%;height:600px" class="chart"></div>
            </div>
            <div class="s-chart-c">
                <div style="background-color:#2c293c;color:white;padding:5px 10px;font-weight:bold">
                    车主工作地
                </div>
                <div id="Workposition" style="width:100%;height:600px" class="chart"></div>
            </div>
            <div class="s-chart-c" style="padding-top:55px">
                <div id="Webtop" class="chart">
                    <div id="web-top-one"></div>
                    <div id="web-left-nine"></div>
                </div>
                <div class="addon-web">十大最受欢迎汽车网站</div>
            </div>
            <div class="s-chart-c" style="padding-top:55px">
                <div id="Apptop" class="chart">
                    <div id="app-top-one"></div>
                    <div id="app-left-nine"></div>
                </div>
                <div class="addon-web addon-app">十大最受欢迎汽车APP</div>
            </div>
            <div class="s-chart-c">
                <div style="background-color:#2c293c;color:white;padding:5px 10px;font-weight:bold">
                    SMG最受欢迎十大车系
                </div>
                <div id="Cartop" style="width:100%;overflow:hidden" class="chart"></div>
            </div>
            <div class="s-chart-c">
                <div style="background-color:#2c293c;color:white;padding:5px 10px;font-weight:bold">
                    车型对比
                </div>
                <div id="Comparisons" style="width:100%;overflow:hidden" class="chart"></div>
            </div>
            <div class="s-chart-c">
                <div id="Hobbies" style="width:100%;height:150px" class="chart"></div>
            </div>
        </div>
    </div>

    <!--重新导入-->
    <div class="modal fade" id="already-upload">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title text-center">重新上传文件</h4>
                </div>
                <div class="modal-body">
                    <form class="uf" role="form" id="upload-form" enctype="multipart/form-data">
                        <input type="file" name="uploadfile" id="file">
                        <input type="hidden" name="province_id" value="2">
                        <input type="hidden" name="sessionid" value="tan2dz3zhvpj5eh71fm8pwcx3m5ud5ao">
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn" id="upload-go">上传</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</body>
<script src="../js/lib/jquery-3.1.0.min.js"></script>
<script src="../css/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../js/lib/echarts.min.js"></script>
<script src="../js/lib/china.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script src="../js/built/chart.js"></script>

</html>